<template>
  <view>
    <view>
      <leave_note/>
      <view class="searchBox rflex flex_y_center flex_p_lr">
        <uv-search :show-action="false" height="45" bgColor="#fff" placeholder="请输入搜索内容" v-model="keyword" clearabled @blur="handleToSearch" />
        <view class="flex_w_8"></view>
        <uv-button @click="handleToSearch" shape="circle">搜索</uv-button>
      </view>
      <view class="flex_h_10"></view>
      <uv-vtabs :barItemBadgeStyle="{right:'20px',top:'12px'}" :list="list" keyName="label" @change="handleChangeTab">
        <uv-vtabs-item>
          <view class="productList flex_p_lr" v-for="item in productList" :key="item.id">
            <view v-if="item.children && item.children.length > 0">
              <view class="flex_h_20 rflex flex_y_center" style="color: orange;font-weight: bolder;font-style: italic">{{item.label}}</view>
              <view class="rflex rflex_wrap">
                <view v-for="child in item.children" :key="child.id" style="width: 32%">
                  <view class="product_item cflex flex_y_center" @click="toOtherPages(child)">
                    <view class="imgs rflex flex_y_center">
                      <image :src="child?.data?.productImgUrl.split(',')[0]" mode="aspectFit"></image>
                    </view>
                    <view class="flex_w_10"></view>
                    <view class="flex_1 cflex flex_x_center">
                      <view class="nameAndType rflex ">
                        <view class="name flex_1" v-if="child.label.length > 4">{{child.label.substring(0, 4)}}…</view>
                        <view class="name flex_1" v-else>{{child.label}}</view>
                      </view>
                      <!--<view class="flex_h_5"></view>
                      <view class="type">型号：XXXXX</view>-->
                    </view>
                  </view>
                  <view class="flex_h_15"></view>
                </view>
              </view>
            </view>
          </view>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
  </view>
</template>

<script>
import Leave_note from "@/components/leave_note.vue";
import InnerLogin from "@/components/innerLogin.vue";
import ProductApi from "@/api/product";
import {getUserInfoId} from "@/utils/auth";

export default {
  components: {Leave_note, InnerLogin},
  data() {
    return {
      typeIndex: null,
      userId: null,
      keyword: '',
      list: [],
      innerType: [],
      productList:[]
    };
  },
  onLoad() {
    this.userId = getUserInfoId();
    const typeId = 0;
    this.typeIndex = 0;
    this.getProductCategoryTree(typeId)
  },
  methods: {
    async handleChangeTab(item) {
      console.log(this.innerType[item]);
      this.keyword = '';
      this.typeIndex = item;
      await this.getProductCategoryTree(this.innerType[item]);
    },
     toOtherPages(item) {
      uni.navigateTo({
        url: '/page_product/product_detail?detailId=' + item.value
      })
    },
    // 查询产品分类树
    async getProductCategoryTree(typeId) {
      if (typeId === 0) {
        this.innerType = [];
        const data = await ProductApi.getProductCategoryTree(typeId)
        this.list = data;
        data.forEach(item => {
          this.innerType.push(item.value);
        })
        this.productList = await ProductApi.getProductCategoryTree(this.innerType[0]);
      }else {
        this.productList = await ProductApi.getProductCategoryTree(typeId);
      }
    },
    async handleToSearch() {
      console.log(this.productList);
      const arr = [];
      await this.getProductCategoryTree(this.innerType[this.typeIndex]);
      if (this.keyword) {
        this.productList.forEach(first => {
          if (first.children && first.children.length > 0) {
            first.children.forEach(second => {
              if (second.label.indexOf(this.keyword) > -1) {
                arr.push(first);
              }
            })
          }
        });
        if (arr.length > 0) {
          const uniqueArr = Array.from(new Set(arr));
          console.log(uniqueArr);
          for (let j = 0; j < uniqueArr.length; j++) {
            uniqueArr[j].children = uniqueArr[j].children.filter(item => item.label.indexOf(this.keyword) > -1);
          }
          this.productList = uniqueArr;
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.searchBox{
  margin-top: -60px;
}
.product_item{
  height: 100px;
  .imgs{
    width: 85px;
    height: 85px;
    image{
      width: 100%;
      height: 85%;
    }
  }
  .nameAndType{
    .name{
      font-size: 1rem;
      font-weight: bolder;
    }
  }
  .type{
    color: #AFAFAF;
  }
}
</style>
